<template>
  <div class="fee">
    <board class="my-card"/>
    <div class="my-card mt-15">
      <div>
        <a-form-model layout="inline" :model="searchData">
          <a-form-model-item>
            <a-select style="width: 120px" loading placeholder="收款项目">
              <a-select-option value="lucy" v-for="(item,i) in typeList" key="i">
                {{ item.title }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item>
            <a-select style="width: 120px" placeholder="项目状态">
              <a-select-option value="lucy">
                lucy
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item>
            <a-input placeholder="Username"/>
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary">搜索</a-button>
          </a-form-model-item>
          <a-form-model-item>
            <a-button>重置</a-button>
          </a-form-model-item>
        </a-form-model>
      </div>
      <a-table bordered :columns="columns" :data-source="data" class="mt-15">
        <a slot="name" slot-scope="text">{{ text }}</a>
      </a-table>
    </div>
  </div>
</template>

<script lang="tsx">
import {Component, Vue} from 'vue-property-decorator';
import Board from '@/views/fee/components/Board.vue';

@Component({
  components: {
    Board,
  },
})
export default class Fee extends Vue {

  protected searchData = {};

  protected typeList: TypeFee.TypeItem[] = [];

  protected async getTypeList(): Promise<void> {
    const {data} = await this.$api.fee.feeTypeList();
    console.log(data, 123121)
    //this.typeList = list;
  }

  protected columns = {};

  protected data = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 2 Lake Park, London No. 2 Lake Park',
      tags: ['loser'],
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
    },
  ];

  protected getFeeList() {

  }

  protected created() {
    this.getTypeList();

    this.columns = [{
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      scopedSlots: {customRender: 'name'},
    },
      {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
        width: 80,
      },
      {
        title: 'Address',
        dataIndex: 'address',
        key: 'address 1',
        ellipsis: true,
      },
      {
        title: 'Long Column Long Column Long Column',
        dataIndex: 'address',
        key: 'address 2',
        ellipsis: true,
      },
      {
        title: 'Long Column Long Column',
        dataIndex: 'address',
        key: 'address 3',
        ellipsis: true,
      },
      {
        title: 'Long Column',
        dataIndex: 'address',
        key: 'address 4',
        ellipsis: true,
      }];

  }

}
</script>
